<template>
  <div class="box">
    <h1>商品管理</h1>
    <div class="header">
      <div class="commod_search_container">
        <div>
          <el-select v-model="value" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <el-input v-model="input" placeholder="输入部门代码"></el-input>
        </div>
        <div>
          <el-button type="primary" @click="onSearch">搜索</el-button>
        </div>
        <div>
          <el-button type="primary" icon="el-icon-plus" @click="addlist"
            >添加商品</el-button
          >
        </div>
      </div>
    </div>

    <div>
      <template>
        <el-table :data="container" border style="width: 100%">
          <el-table-column fixed prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              状态为
              <span>{{ scope.row.status == 1 ? "在售" : "已下架" }}</span>
              <!-- <span v-show="scope.row.status == 2">下架</span> -->
              <el-button @click="change(scope.row)">{{
                scope.row.status == 2 ? "上架" : "下架"
              }}</el-button>
              <!-- <el-button v-show="scope.row.status == 1">下架</el-button> -->
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button type="text" size="small" @click="onEdit(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器开始 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="addDatas.pagenum"
          :page-sizes="[3, 5, 10, 100]"
          :page-size="addDatas.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
        <!-- 分页器结束 -->
      </template>
    </div>
  </div>
</template>

<script>
import { listContainerRight, Search } from "../../../http/http";

export default {
  name: "permissions",
  components: {},
  props: {},
  data() {
    return {
      // 全部数据
      container: [],
      // 传递参数的数据值
      addDatas: {
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
      options: [
        {
          value: "ID",
          label: "按商品id查找",
        },
        {
          value: "name",
          label: "按商品名称查找",
        },
      ],
      value: "",
      input: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.listContainer();
  },
  methods: {
    async listContainer() {
      const { data: res } = await listContainerRight({
        pageNum: this.addDatas.pagenum,
        pageSize: this.addDatas.pagesize,
      });
      // console.log(res);
      this.container = res.data.list;
      this.total = res.data.total;
    },
    handleSizeChange(newValue) {
      // console.log(newValue);
      this.addDatas.pagesize = newValue;
      this.listContainer();
    },
    //pageNum
    handleCurrentChange(newValue) {
      // console.log(newValue);
      this.addDatas.pagenum = newValue;
      this.listContainer();
    },
    //搜索
    onSearch() {
      if (this.value) {
        if (this.value === "ID") {
          this.type = "productId";
        } else {
          this.type = "productName";
        }
        Search({
          [this.type]: this.input,
          pageNum: this.currpage,
        }).then((res) => {
          console.log(res);
          this.container = res.data.data.list;
          this.total = res.data.data.total;
        });
      } else {
        this.$message({
          message: "请选择查询条件",
          type: "warning",
        });
      }
    },
    change(val) {
      // console.log(val);
      if (val.status == 1) {
        this.$confirm("确定下架？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "下架成功",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消下架",
            });
          });
        val.status = 2;
      } else {
        if (val.status == 2) {
          val.status = 1;
          this.$confirm("确定下架？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                type: "success",
                message: "上架成功",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消上架",
              });
            });
        }
      }
    },
    handleClick(val) {
      console.log(val);
      this.$router.push({ name: "productHand", params: { data: val.id } });
    },
    addlist() {
      this.$router.push({ path: "/add" });
    },
    onEdit(val) {
      console.log(val);
      this.$router.push({ name: "edits", params: { data: val.id } });
    },
  },
};
</script>

<style scoped>
.box {
  width: 80%;
  margin-left: 20%;
}
.header button {
  width: 100px;
  height: 40px;
  color: white;
  background: rgba(51, 122, 183);
  border: none;
  border-radius: 7%;
}
.commod_search_container {
  margin: 10px 0;
  width: 70%;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}
</style>